<template>
    <el-container direction="vertical">

        <el-row>
            <div class="login-container">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model.number="ruleForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model.number="ruleForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item label="图形验证码" prop="verifyCode">
                        <img @click="initVerify()" class="verify-img" :src="ruleForm.verifyCode" alt="">
                        <el-input class="verify-code" v-model.number="ruleForm.captcha"
                            placeholder="请输入图形验证码"></el-input>
                    </el-form-item>

                    <el-form-item class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-row>

    </el-container>
</template>

<script>
import axios from 'axios';
export default {
    name: 'LoginPage',
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                verifyCode: '/tr/admin/auth/verify',
                captcha: ''
            },
            rules: {
                // username: [
                //     { required: true, message: '请输入用户名', trigger: 'blur' }
                // ],
                // password: [
                //     { required: true, message: '请输入密码', trigger: 'blur' }
                // ],
                // verify: [
                //     { required: true, message: '请输入图形验证码', trigger: 'blur' }
                // ]
            }
        }
    },
    created() {
        // this.initVerify()
    },
    methods: {
        initVerify() {
            this.ruleForm.verifyCode = '/tr/admin/auth/verify?t=' + new Date().getTime()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('/tr/admin/auth/loginin', {
                        username: this.ruleForm.username,
                        password: this.ruleForm.password,
                        captcha: this.ruleForm.captcha
                    }).then(
                        response => {
                            var resData = response.data
                            if (resData.code == 10200) {
                                this.$message.success('登陆成功')
                                localStorage.setItem('token', resData.data.token)
                                this.$router.push({
                                    path: '/admin'
                                })
                            } else {
                                console.log(resData.msg)
                                this.$message.error(resData.msg)
                                this.initVerify()
                            }
                            // console.log(resData)
                        },
                        error => {
                            console.log(error.message)
                        }
                    )
                    // this.$message.success('登陆成功')
                    // this.$router.push({
                    //     path: '/home'
                    // })
                } else {
                    this.$message.error('登陆失败')
                    return false;
                }
            });
        }
    }
}
</script>

<style>
.el-form {
    width: 80%;
    position: relative;
    left: calc((100% - 80%) / 2);
    top: 50px;
}

.login-container {
    width: 550px;
    height: 360px;
    background-color: #f5f5f5;
    position: relative;
    left: calc((100% - 550px) / 2);
    margin-top: 100px;
    border-radius: 10px;
}

.el-form-item__content {
    text-align: center;
}

.login-btn .el-form-item__content {
    margin-left: 0px !important
}

.verify-img {
    width: 100px;
    height: 40px;
    float: left;
}

.verify-code {
    width: 60%;
    line-height: 40px;
    height: 40px;
    float: right;
}
</style>